<template>
    <div class="baseInfo">
      <div class="baseInfo-header" >
        <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
        <el-button type="primary" size="small" @click="handleDelete">删除</el-button>
      </div>
      <vxe-table
        border
        stripe
        ref="tableRef"
        size="small"
        header-align="center"
        :row-config="rowConfig"
        :column-config="columnConfig"
        :data="tableData"
        @checkbox-change="checkboxChangeEvent"
        @checkbox-all="checkboxAll"
      >
        <vxe-column type="checkbox" width="40" fixed="left"></vxe-column>
        <vxe-column type="seq" width="70" align="center" fixed="left"></vxe-column>
        <vxe-column field="quotationId" show-overflow="title" align="center" title="销售报价单号"></vxe-column>
        <vxe-column field="productName" show-overflow="title" align="center" title="产品名称"></vxe-column>
        <vxe-column field="productCode" show-overflow="title" align="center" title="产品编码"></vxe-column>
        <vxe-column field="productSpc" show-overflow="title" align="center" title="规格型号"></vxe-column>
        <vxe-column field="unitOfMeasure" width="80" show-overflow="title" align="center" title="单位"></vxe-column>
        <vxe-column field="quantityCurr" width="120" show-overflow="title" align="center" title="当前可用库存"></vxe-column>
        <vxe-column field="quantitySales" width="120" show-overflow="title" align="center" title="销售数量"></vxe-column>
        <vxe-column field="priceExTax" width="120" show-overflow="title" align="center" title="成本价（不含税）"></vxe-column>
        <vxe-column field="stdPriceExTax" width="120" show-overflow="title" align="center" title="标准单价（不含税）"></vxe-column>
        <vxe-column field="stdAmountExTax" width="120" show-overflow="title" align="center" title="标准金额（不含税）"></vxe-column>
        <vxe-column field="vat" width="120" show-overflow="title" align="center" title="增值税税额"></vxe-column>
        <vxe-column field="stdAmount" width="120" show-overflow="title" align="center" title="标准金额（含税）"></vxe-column>
        <vxe-column field="discount" width="120" show-overflow="title" align="center" title="折扣"></vxe-column>
        <vxe-column field="reducedAmount" width="120" show-overflow="title" align="center" title="折扣金额（含税）"></vxe-column>
        <vxe-column field="platformYield" width="120" show-overflow="title" align="center" title="平台让利"></vxe-column>
        <vxe-column field="yieldAmount" width="120" show-overflow="title" align="center" title="让利后金额（含税）"></vxe-column>
        <vxe-column field="expressFee" width="120" show-overflow="title" align="center" title="物流费用"></vxe-column>
        <vxe-column width="160" align="center" title="操作" fixed="right">
          <template #default="{ row }">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(row)"
            >删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
      <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="1400px" append-to-body @close="cancel">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="销售报价单号" prop="quotationId">
                <el-input v-model="form.quotationId" placeholder="请输入销售报价单号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品名称" prop="productName">
                <el-input v-model="form.productName" placeholder="请输入产品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品编码" prop="productCode">
                <el-input v-model="form.productCode" placeholder="请输入产品编码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="规格型号" prop="productSpc">
                <el-input v-model="form.productSpc" placeholder="请输入规格型号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位" prop="unitOfMeasure">
                <el-input v-model="form.unitOfMeasure" placeholder="请输入单位" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前可用库存" prop="quantityCurr">
                <el-input v-model="form.quantityCurr" placeholder="请输入当前可用库存" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="销售数量" prop="quantitySales">
                <el-input v-model="form.quantitySales" placeholder="请输入销售数量" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="成本价（不含税）" prop="priceExTax">
                <el-input v-model="form.priceExTax" placeholder="请输入成本价（不含税）" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标准单价（不含税）" prop="stdPriceExTax">
                <el-input v-model="form.stdPriceExTax" placeholder="请输入标准单价（不含税）" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="标准金额（不含税）" prop="stdAmountExTax">
                <el-input v-model="form.stdAmountExTax" placeholder="请输入标准金额（不含税）" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="增值税税额" prop="vat">
                <el-input v-model="form.vat" placeholder="请输入增值税税额" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标准金额（含税）" prop="stdAmount">
                <el-input v-model="form.stdAmount" placeholder="请输入标准金额（含税）" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="折扣" prop="discount">
                <el-input v-model="form.discount" placeholder="请输入折扣" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="折扣金额（含税）" prop="reducedAmount">
                <el-input v-model="form.reducedAmount" placeholder="请输入折扣金额（含税）" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="平台让利" prop="platformYield">
                <el-input v-model="form.platformYield" placeholder="请输入平台让利" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="让利后金额（含税）" prop="yieldAmount">
                <el-input v-model="form.yieldAmount" placeholder="请输入让利后金额（含税）" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="物流费用" prop="expressFee">
                    <el-input v-model="form.expressFee"  placeholder="请输入物流费用" />
                </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-row> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>

    import { 
        getMemberAddressList,
        addMemberAddress,
        editMemberAddress,
        delMemberAddress,
    } from "@/api/mes/sales/memberBasic";
  import ItemSelect  from "@/components/itemSelect/single.vue";
  export default {
    name: 'address',
    props: {
      cellId: undefined,
    },
    components: {
      ItemSelect,
    },
    data() {
      return {
        showItemSelect: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        form: {},
        tableData: [],
        columnConfig: {
          drag: true,
          resizable: true,
          storage: true,
          sortConfig: {
            trigger: 'cell',
            remote: true
          },
          align: 'center',
          headerAlign: 'center'
        },
        rowConfig: {
          drag: true,
          keyField: 'id',
          isHover: true,
        },
        total: 0,
        title: '',
        open: false,
        rules: {
            consignee: [
                { required: true, message: '请输入收货人', trigger: 'blur' }
            ],
            phone: [
                { required: true, message: '请输入手机', trigger: 'blur' }
            ],
            addrBrief: [
                { required: true, message: '请输入省市区', trigger: 'blur' }
            ],
            address: [
                { required: true, message: '请输入详细地址', trigger: 'blur' }
            ],
        },
        ids: []
      }
    },
    created() {
        
      // console.log('poStatus', this.poStatus);
    },
    watch: {
      cellId: {
        handler(val) {
          this.getList();
        },
      }
    },
    methods: {
      /** 查询供应商退货行列表 */
      getList() {
        getMemberAddressList(this.cellId, this.queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          // console.log('response', response);
        });
        // this.$emit('getBaseInfoList', this.queryParams)
      },
      reset(){
        this.form = {};
        this.resetForm('form');
      },
      handleAdd(){
        this.reset()
        this.title = '新增';
        this.open = true;
        console.log('handleAdd');
      },
      handleEdit(row){
        this.title = '修改';
        this.open = true;
        this.form = {...row};
      },
      checkboxChangeEvent(checked){
        this.ids = checked.records.map(item => item.id)
        console.log(checked.records, this.ids);
      },
      checkboxAll(checked){
        this.ids = checked.records.map(item => item.id)
        console.log(checked.records, this.ids)
      },
      handleDelete(row){
        const ids = row.id || this.ids;
        if(ids.length == 0){
            this.$message.error('请选择要删除的数据')
            return; 
        }
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            delMemberAddress(ids).then(response => {
            this.$message.success('删除成功')
            this.getList()
          })
        })
      },
      cancel(){
            this.open = false;
            this.reset();
            console.log('cancel');
      },
      submitForm(){
        this.$refs['form'].validate((valid) => {
            if (valid) {
                const params = {
                    ...this.form,
                    clientId: this.cellId,
                }
                if(this.form.id){
                    editMemberAddress(params).then(response => {
                        this.$message.success('修改成功')
                        this.getList()
                        this.cancel()
                    })
                }else{
                    addMemberAddress(params).then(response => {
                        this.$message.success('新增成功')
                        this.getList()
                        this.cancel()
                    })
                }
            }
        })
      },
      //物料选择弹出框
      onItemSelected(obj){
        if(obj != undefined && obj != null){
          this.form.productId = obj.itemId;
          this.form.productCode = obj.itemCode;
          this.form.productName = obj.itemName;
          this.form.productSpc = obj.specification;
          this.form.unitOfMeasure = obj.unitOfMeasure;  
        }
      },
      handleSelectProduct(){
        this.showItemSelect = true;
        this.$nextTick(()=>{
          this.$refs.itemSelect.showFlag = true;
        })
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .baseInfo{
    &-header{
      margin-bottom: 10px;
    }
  }
  </style>